<!--
* @FileDescription: 实时曲线图表组件
* @Author: yuec621@outlook.com
* @Date: 2024-12-25 12:29:28
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:29:28
-->
<template>
    <div>
        <div id="comChart" style="width: 100%;height: 500px;">
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import symbolCard from "./symbolCard.vue";
    import axios from "@/utils/request"
    import * as echarts from 'echarts'
    import dayjs from 'dayjs'
    import printJS from "print-js";
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    import _ from 'lodash'
    const props = defineProps({
        chartList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        attrObj: {
            type: Object,
            default: () => {
                return undefined
            }
        },
        statusList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        symbolShow: {
            type: String,
            default: () => {
                return 'none'
            }
        },
        splitNumber: {
            type: Number,
            default: () => {
                return 20
            }
        },
        toolType: {
            type: String,
            default: () => {
                return ''
            }
        },
        nameListstatus: {
            type: Array,
            default: () => {
                return []
            }
        },

    })
    let comChart
    const state = reactive({
        symbolShow: false,
        splitNumber: 10,
    })

    function setC1(chartList, statusList) {
        let yAxisList = []
        let xAxisList = []
        let colors = ['rgba(212, 63, 63, 1)', 'rgba(42, 130, 228, 1)', 'rgba(121, 72, 234, 1)']
        let serList = []
        var categories = [];
        let xdata = []
        let serArr = []
        let xdataAlarm = []
        let grid = []
        if (JSON.stringify(statusList) != "{}") {
            xdata = statusList.allTimes.map(item => {
                return dayjs(item).format('MM-DD HH:mm');
            })
            if (statusList.hisSwitchLines != null) {
                statusList.hisSwitchLines.forEach((item, index) => {
                    let larr = item.hisSwitchLinePoints
                        .map((sub1, i) => {
                            return sub1.valueStr != null ? sub1.valueStr : ''
                        })
                    let larrnew = _.uniqBy(larr)
                    grid.push({
                        left: '2%',
                        top: index * 35 + 10 + '%',
                        height: (statusList.hisSwitchLines.length == 1 ? '85' : '50') /
                            statusList.hisSwitchLines
                            .length +
                            '%',
                        right: 30,
                        bottom: '10%'
                    })
                    yAxisList.push({
                        name: index == 0 ? props.attrObj && props.attrObj.chartY : '',
                        gridIndex: (index + 1),
                        position: 'right',
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(91, 109, 128, 0.16)',
                                type: 'dashed'
                            }
                        },
                        splitNumber: 0.5,
                        name: "{a" + "|" + item.pointId + '\t' + "}" + "{b" + "|" + larrnew.join(
                                '\n\n') +
                            "}" +
                            '{underline| }',
                        nameLocation: '',
                        nameTextStyle: {
                            color: '#000',
                            align: 'right',
                            verticalAlign: 'middle',
                            rich: {
                                a: {
                                    color: "#000",
                                    fontWeight: "800",
                                    fontSize: 14
                                },
                                b: {
                                    padding: [0, 10, 0, 0]
                                },
                                underline: { //模拟画下划线
                                    backgroundColor: 'rgba(218, 231, 255, 1)',
                                    position: 'bottom',
                                    height: 1,
                                    width: 100
                                }
                            },
                        },
                    })
                    xAxisList.push({
                        name: statusList.hisSwitchLines.length == index + 1 ?
                            props.attrObj && props.attrObj
                            .chartX : '',

                        gridIndex: (index + 1),
                        show: statusList.hisSwitchLines.length == index + 1 ? true : false,
                        type: "category",
                        boundaryGap: false,
                        data: xdata,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(91, 109, 128, 0.8)'
                            }
                        },
                    })
                    serList.push({
                        type: "line",
                        step: "start",
                        data: item.hisSwitchLinePoints
                            .map((sub1, i) => {
                                return sub1.value
                            }),
                        xAxisIndex: index + 1,
                        yAxisIndex: index + 1,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: item.lineColor ? item.lineColor : colors[index]
                        }
                    })
                })
            }
        }
        if (JSON.stringify(chartList) != "{}") {
            console.log(chartList, 'chartList');
            xdataAlarm = chartList.allTimes.map(item => {
                return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
            })
            chartList.hisSimulateLines.forEach(item => {
                serArr.push({
                    name: item.pointId + item.place,
                    type: "line",
                    smooth: false,
                    symbolSize: 8,
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    symbol: props.symbolShow || (item.attrObj && item.attrObj.maxdotSwitch) || (props
                            .attrObj && props.attrObj.chartDot) ?
                        'circle' : 'none', //"circle",
                    itemStyle: {
                        normal: {
                            color: item.color == null ? item.attrObj && item.attrObj.maxlineColor : item
                                .color,
                        }
                    },
                    lineStyle: {
                        width: item.attrObj && item.attrObj.maxlineWidth ? item.attrObj.maxlineWidth : 2
                    },
                    data: item.hisSimulatePoints.map(itemsub => {
                        return itemsub.maxValue
                    })
                }, {
                    name: item.pointId + item.place,
                    type: "line",
                    smooth: false,
                    symbolSize: 8,
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    symbol: props.symbolShow || (item.attrObj && item.attrObj.mindotSwitch) || (props
                            .attrObj && props.attrObj.chartDot) ?
                        'circle' : 'none', //"circle",
                    itemStyle: {
                        normal: {
                            color: item.color == null ? item.attrObj && item.attrObj.minlineColor : item
                                .color,
                        }
                    },
                    lineStyle: {
                        width: item.attrObj && item.attrObj.minlineWidth ? item.attrObj.minlineWidth : 2
                    },
                    data: item.hisSimulatePoints.map(itemsub => {
                        return itemsub.minValue
                    })
                }, {
                    name: item.pointId + item.place,
                    type: "line",
                    smooth: false,
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    symbolSize: 8,
                    symbol: props.symbolShow || (item.attrObj && item.attrObj.avgdotSwitch) || (props
                            .attrObj && props.attrObj.chartDot) ?
                        'circle' : 'none', //"circle",
                    itemStyle: {
                        normal: {
                            color: item.color == null ? item.attrObj && item.attrObj.avglineColor : item
                                .color,
                        }
                    },
                    lineStyle: {
                        width: item.attrObj && item.attrObj.avglineWidth ? item.attrObj.avglineWidth : 2
                    },
                    data: item.hisSimulatePoints.map(itemsub => {
                        return itemsub.avgValue
                    })
                })
            })
        }
        let option = {
            tooltip: {
                formatter: function (params) {
                    return params.marker + params.name + ": " + params.value[3] + " ms";
                },
            },
            title: {
                text: props.attrObj && props.attrObj.chartTitle,
                left: "center",
                top: 10,
            },

            grid: [{
                top: 60,
                left: 30,
                right: '8%',
                bottom: 30
            }, ...grid],
            dataZoom: [{
                    type: "inside",
                    filterMode: "weakFilter",
                    showDataShadow: false,
                    top: 400,
                    height: 10,
                    borderColor: "transparent",
                    backgroundColor: "#e2e2e2",
                    handleIcon: "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
                    handleSize: 20,
                    start: 0,
                    end: 60,
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: "#aaa",
                    },
                    labelFormatter: "",
                },
                {
                    type: "inside",
                    filterMode: "weakFilter",
                },
            ],
            xAxis: [{
                    show: false,
                    data: xdataAlarm,
                },
                ...xAxisList
            ],
            yAxis: [{
                    type: "value",
                    position: 'left',
                    splitNumber: state.splitNumber, //纵向放大
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.16)',
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.8)'
                        }
                    },
                    axisLabel: {
                        formatter: function (params) {
                            return params;
                        },
                        textStyle: {
                            color: "#000",
                            fontWeight: "600",
                        },
                    },
                },
                ...yAxisList,
            ],
            series: [
                ...serArr,
                ...serList
            ],
        };
        comChart.setOption(option, true)
    }
    watchEffect(() => {
        if (props.toolType == '13') {
            let statesrc = comChart.getDataURL({
                type: "png", //jpeg | jpeg
                pixelRatio: 1,
                backgroundColor: "#fff", //背景色白色
            });
            printJS({
                printable: statesrc, //表格的数据
                type: "image",
                imageStyle: "width:100%;height:100%; margin-bottom:0px;",
            });
        }
        if (props.toolType == '12') {
            var picInfo = comChart.getDataURL({
                type: 'png',
                pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
                backgroundColor: '#000'
            }); //获取到的是一串base64信息
            const elink = document.createElement('a');
            elink.download = "历史曲线图";
            elink.style.display = 'none';
            elink.href = picInfo;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink)
        }
        if (JSON.stringify(props.chartList) != "{}" || JSON.stringify(props.statusList) != "{}") {
            console.log(props.chartList, 'props.chartList');
            state.symbolShow = props.symbolShow
            state.splitNumber = props.splitNumber
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1(props.chartList, props.statusList)
            })
        } else {
            nextTick(() => {
                // comChart = echarts.init(document.getElementById("comChart"));
                // setC1({}, {})
            })
        }
    })
    onMounted(() => {
        // nextTick(()=>{
        //     comChart = echarts.init(document.getElementById("comChart"));
        //     setC1({})
        // })
    })
</script>